<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 500px;
            height: 335px;
            background-color:#bfa ;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        #ullist{
            /*background-color: #3A87EF;*/
            /*width: 2500px;!*用js设置宽度*!*/
            position: absolute;

        }
        #ullist li{
            list-style: none;
            float: left;
            
        }
        #box2{
            position: absolute;
            bottom: 15px;
            /*left: 0;!*想要居中需要设置left的值*!*/
        }
        #box2 a{
            float: left;
            width: 15px;
            height: 15px;
            background-color: red;
            margin: 0 5px;
        }
        #box2 a:hover{
            background-color: black;
        }
    </style>
    <script>
        window.onload=function () {
            var ullist=document.getElementById("ullist");
            var box1=document.getElementById("box1");
            var imgArr=document.getElementsByTagName("img");
                ullist.style.width=500*imgArr.length+"px";
            var box2=document.getElementById("box2");
                box2.style.left=(box1.offsetWidth-box2.offsetWidth)/2+"px";
                //点击超链接的时候 图片切换
            var index=0;
            var allA=document.getElementsByTagName("a");
                allA[index].style.backgroundColor="black";
            for (var i=0;i<allA.length;i++){
                allA[i].num=i;//为每一个超链接都添加一个num属性
                allA[i].onclick=function () {
                    clearInterval(timer);
                    index=this.num;
                    setA();
                    move(ullist,"left",-500*index,20,function () {
                        autoChange();//点击事件执行完毕之后 自动切换图片
                    });
                };

            }
            autoChange();//自动切换图片
            //创建一个方法 设置选中的a
            function setA() {
                if (index>=imgArr.length-1){
                    index=0;
                    ullist.style.left=0;
                }
                for (var i=0;i<allA.length;i++){
                    allA[i].style.backgroundColor="";
                }
                allA[index].style.backgroundColor="black";
            }

            var timer;
            function autoChange(){

                // if (index>imgArr.length){
                //     index=0;
                // }
                timer=setInterval(function () {
                    index++;
                    move(ullist,"left",-500*index,20,function () {
                        setA();
                    });
                },3000);
            }


        };
        function move(obj,attr,target,speed,callback) {
            //判断speed的正负值 如果从0-800则speed为正 ;如果800-0 则speed为负值
            var current=parseInt(getStyle(obj,attr));
            if (current>target){
                speed=-speed;
            }
            //点击按钮以后box1向右移动
            clearInterval(obj.timer);
            obj.timer=setInterval(function () {
                var oldValue=parseInt(getStyle(obj,attr));
                var newValue=oldValue+speed;
                //向右 移动0-800 需要判断newValue是否大于target
                //向左 移动800-0 需要判断newValue是否小于target
                if ((speed>0&&newValue>target) ||(speed<0&&newValue<target)){
                    newValue=target;
                }
                obj.style[attr]=newValue+"px";
                if (newValue==target){
                    clearInterval(obj.timer);
                    callback&&callback();
                }
            },50);
        }
        function getStyle(obj,name){
            // if (window.getComputedStyle){
            //     return getComputedStyle(obj,null)[name];//正常浏览器的方式
            // }else {
            //     return obj.currentStyle[name];//IE
            // }
            return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];

        }
    </script>
</head>
<body>
<div id="box1">
    <ul id="ullist">
        <li><img src="../imagconman/1.jpg" alt=""></li>
        <li><img src="../imagconman/2.jpg" alt=""></li>
        <li><img src="../imagconman/3.jpg" alt=""></li>
        <li><img src="../imagconman/4.jpg" alt=""></li>
        <li><img src="../imagconman/5.jpg" alt=""></li>
        <li><img src="../imagconman/1.jpg" alt=""></li>
    </ul>
    <div id="box2">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>
</body>
</html>